<script setup>
import HelloWorld from './components/HelloWorld.vue'
import  FilePreview from '@/components/FilePreview'
import { ElButton } from 'element-plus'
import {reactive} from "vue-demi";

const data = reactive({
    fileUrl: 'http://localhost:8090/Java%E5%BC%80%E5%8F%91%E6%89%8B%E5%86%8C%EF%BC%88%E5%B5%A9%E5%B1%B1%E7%89%88%EF%BC%89.pdf',
    showPreview: false
});

</script>


<template>
  <div>
      <div  style="display: flex;justify-content:space-between;align-items:center;width: 600px;height: 100px;flex-wrap: wrap;flex-direction: column;">
          文件访问地址仅支持xlsx/docx/pptx/pdf
          <el-input v-model="data.fileUrl" placeholder="输入文件地址"/>
          <el-button style="width: 100px;" @click="data.showPreview=true;">预览</el-button>
      </div>

      <file-preview
          :src="data.fileUrl"
          v-if="data.showPreview"
          :close="() => {
              data.showPreview=false;
           }"
      />
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
